<template>
<div class="content">
    <mt-header fixed title="测量">
        <div slot="left">
            <mt-button icon="back" @click.native="goback()">返回</mt-button>
        </div>
    </mt-header>
       <mt-loadmore :bottom-method="loadBottom" :autoFill="autoFill" :bottom-all-loaded="allLoaded" ref="loadmore">
       <div v-for="(item) in measure" :key="item.id" class="measure">
         <p class="time">{{item.eventDate}}</p>
         <p class="parameter">{{item.measurementsSummary}}</p>
       </div>
    </mt-loadmore>
    <not-data-page v-show="measure.length === 0"></not-data-page>
    </div>
</template>
<script>
import notDataPage from '@/component/notQueryDataPage.vue'
export default {
  data () {
    return {
      param: {
        siteid: '',
        assetid: '',
        page: '1',
        pageSize: '20',
        startDate: '',
        endDate: '',
        ismeasurement: 'YES',
        islocation: 'NO',
        isalert: 'NO',
        history: 'NO'
      },
      measure: [],
      autoFill: false,
      allLoaded: false,
      pages: 0

    }
  },
  components: {
    notDataPage
  },
  computed: {
    siteid () {
      return this.$store.state.user.sitelist[0].siteid
    }
  },
  created () {
    this.getMeasureList(0)
  },
  methods: {
    goback () {
      this.$router.go(-1)
    },
    // 请求测量的数据
    async getMeasureList (type) {
      this.param.siteid = this.siteid
      this.param.assetid = this.$route.query.assetid
      const res = await this.$store.dispatch('assetevent', this.param)
      if (res.status === '0') {
        this.pages = res.context && res.context.results ? res.context.results.length : 0
        type ? this.measure = [...this.measure, ...res.context.results] : this.measure = [...res.context.results]
      }
    },
    // 上拉加载
    async loadBottom () {
      this.$refs.loadmore.onBottomLoaded()
      if (this.pages < this.param.pageSize) {
        this.allLoaded = true
        return
      }
      this.param.page++
      await this.getMeasureList(1)
    }
  }
}
</script>
<style lang="less" scoped>
.content{
padding-top: 40px;
overflow: scroll;
}
.measure{
  padding: 10px;
  border-bottom: 1px solid #ccc;
  p{
    line-height: 25px;
    font-size: 16px;
  }
  .parameter{
    color: #5F9EA0;
  }
}
</style>
